<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-form label-position="top">
          <el-form-item label="场景信息">
            <el-card>
              <el-form ref="form" :model="form" label-position="top">
                <el-form-item label="场景全称">
                  <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="场景简称">
                  <el-input v-model="form.alias" />
                </el-form-item>
                <el-form-item label="场景地址">
                  <el-input v-model="form.address" />
                </el-form-item>
                <el-form-item label="经度">
                  <el-input v-model="form.lng" />
                </el-form-item>
                <el-form-item label="纬度">
                  <el-input v-model="form.lat" />
                </el-form-item>
                <!-- <el-form-item label="场景指令下发时间单位：ms">
                  <el-input v-model="form.dinterval"/>
                </el-form-item> -->
                <el-form-item label="拾取坐标">
                  <el-row :gutter="1">
                    <el-col :span="12">
                      <map-point :id="form.id" :lng="form.lng" :lat="form.lat" @change="handlePosition"/>
                    </el-col>
                    <el-col :span="12">
                      <el-button type="primary" icon="el-icon-upload" @click="handleUpdateClick">更新修改</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </el-card>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="20">
        <el-form label-position="top">
          <el-form-item label="场景中的设备列表">
            <bind-device :scene="id" />
          </el-form-item>
          <el-form-item label="测量组">
            <bind-check-group :scene="id" />
          </el-form-item>
          <!--<el-form-item label="用户">
            <bind-user :scene="id"/>
          </el-form-item>-->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<!--<el-form-item label="场景中的高级操作">-->
<!--<advanced-setting :id="form.id" />-->
<!--</el-form-item>-->
<script>
import BindCheckGroup from './components/bindCheckGroup'
import BindDevice from './components/bindDevice'
import BindUser from './components/bindUser'
import MapPoint from './components/amapPostion'
// import AdvancedSetting from './components/advancedSetting'

import { get, update } from '@/api/scene'
import { check } from '@/utils/check'
import { mapGetters } from 'vuex'
export default {
  components: {
    BindDevice,
    BindCheckGroup,
    BindUser,
    MapPoint
    // AdvancedSetting
  },
  data() {
    return {
      form: {},
      id: null,
      checkEdit: false,
    }
  },
  created() {
    this.id = this.$route.params && parseInt(this.$route.params.id)
    this.fetchData(this.id)
  },
  mounted() {
    // check(this.roles, ['修改场景'], (list) => {
    //   this.checkEdit = list[0]
    // })
  },
  computed: {
    // ...mapGetters([
    //   'roles'
    // ]),
  },
  methods: {
    fetchData(id) {
      get(id)
        .then(response => {
          this.form = response.data
          console.log(response.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 坐标改变
    handlePosition(lng, lat) {
      this.form.lng = '' + lng
      this.form.lat = '' + lat
    },
    handleUpdateClick() {
      // if (this.checkEdit) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            update(this.form).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              });
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      // } else {
      //   this.$message.error('您暂无权限操作修改功能！');
      // }
    }
  }
}
</script>
